<template>
    <footer>
        <router-link class="nav-item" v-on:click="doClick('业绩统计')" to="/yeji">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-yeji1"></use>
            </svg>
            <span>业绩</span>
        </router-link>
        <router-link class="nav-item" v-on:click="doClick('客户统计')" to="/client">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-augiclingdaiqian"></use>
            </svg>
            <span>客户</span>
        </router-link>
        <router-link class="nav-item" v-on:click="doClick('我的')" to="/my">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-weibiaoti-"></use>
            </svg>
            <span>我的</span>
        </router-link>
    </footer>
</template>
<script>
import titleJs from "@/router/title.js"
export default {
    methods: {
        doClick(event) {
            titleJs.$emit('titleSpring', event);
        }
    }
}
</script>
<style>
footer {
    width: 100%;
    height: 1rem;
    background: white;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #ccc;
    padding-top: 3px
}
footer .icon{
    font-size: .5rem
}
.nav-item {
    display: flex;
    flex: 1;
    text-align: center;
    align-items: center;
    color: #ccc;
    flex-direction: column
}


.icon {
    font-size: 36px;
    color: #ccc
}

.router-link-active {
    color: #333a4b
}

.router-link-active .icon {
    color: #333a4b
}
</style>
